<template>
  <el-card class="page-container" v-loading="loading">
    <template #header>
      <div class="header">
        <span>基本资料</span>
      </div>
    </template>

    <!-- 用户基本信息 -->
    <el-descriptions title="用户信息" :column="2" border>
      <el-descriptions-item label="用户名">{{ userInfo.username || '-' }}</el-descriptions-item>
      <el-descriptions-item label="真实姓名">{{ userInfo.realName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="角色">
        <el-tag v-if="userInfo.roleName" type="primary">
          {{ userInfo.roleName }}
        </el-tag>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="userInfo.status === 1 ? 'success' : 'danger'">
          {{ userInfo.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="头像" v-if="userInfo.avatar">
        <el-image 
          :src="userInfo.avatar" 
          style="width: 80px; height: 80px; border-radius: 4px"
          :preview-src-list="[userInfo.avatar]"
          fit="cover"
        />
      </el-descriptions-item>
      <el-descriptions-item label="创建时间" :span="userInfo.avatar ? 1 : 2">
        {{ formatDateTime(userInfo.createTime) }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 学生信息（仅学生角色显示） -->
    <el-descriptions 
      v-if="isStudent && studentInfo" 
      title="学生信息" 
      :column="2" 
      border 
      style="margin-top: 20px"
    >
      <el-descriptions-item label="姓名">{{ studentInfo.name || '-' }}</el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-tag :type="studentInfo.gender === 1 ? 'primary' : 'success'">
          {{ formatGender(studentInfo.gender) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="年级（入学年份）">{{ studentInfo.grade || '-' }}</el-descriptions-item>
      <el-descriptions-item label="困难等级">
        <el-tag v-if="studentInfo.difficultyLevel === 1" type="info">一般困难</el-tag>
        <el-tag v-else-if="studentInfo.difficultyLevel === 2" type="warning">困难</el-tag>
        <el-tag v-else-if="studentInfo.difficultyLevel === 3" type="danger">特别困难</el-tag>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间" :span="2">
        {{ formatDateTime(studentInfo.createTime) }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 暂无数据提示 -->
    <el-empty v-if="!userInfo.id" description="暂无用户信息" />
  </el-card>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { _getCurrentUser } from '@/api/user'
import { _getStudentByUserId } from '@/api/application'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const userInfo = ref({})
const studentInfo = ref(null)

// 判断是否是学生角色
const isStudent = computed(() => {
  if (!userInfo.value.roleName) return false
  // 判断角色名称中是否包含"学生"
  return userInfo.value.roleName.includes('学生')
})

// 格式化性别
const formatGender = (gender) => {
  if (gender === 1) return '男'
  if (gender === 0) return '女'
  return '-'
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 获取用户信息
const getUserInfo = async () => {
  loading.value = true
  try {
    const res = await _getCurrentUser()
    if (res.code === 200) {
      userInfo.value = res.data.user || {}
      
      // 如果是学生角色，获取学生信息
      if (isStudent.value && userInfo.value.id) {
        await getStudentInfo(userInfo.value.id)
      }
    } else {
      ElMessage.error(res.message || '获取用户信息失败')
    }
  } catch (err) {
    console.error('获取用户信息失败:', err)
    ElMessage.error('获取用户信息失败')
  } finally {
    loading.value = false
  }
}

// 获取学生信息
const getStudentInfo = async (userId) => {
  try {
    const res = await _getStudentByUserId(userId)
    if (res.code === 200) {
      studentInfo.value = res.data.student || null
    } else {
      console.error('获取学生信息失败:', res.message)
    }
  } catch (err) {
    console.error('获取学生信息失败:', err)
  }
}

// 页面加载时获取用户信息
onMounted(() => {
  getUserInfo()
})
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
